<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动条</title>
	<style>
		#outer{
			position: relative;
			width:800px;
			height:20px;
			background-color: #ccc;
			margin:20px auto;
		}
		#inner{
			position: absolute;
			left:0;
			width:20px;
			height:20px;
			background-color: red;
			cursor:pointer;
		}
		#box{
			width:0px;
			height:0px;
			background-color: green;
			margin:0 auto;
			opacity: 0;
		}
	</style>
</head>
<body>
	<div id="outer">
		<div id="inner"></div>
	</div>
	<div id="box"></div>
	<script>
		function getPos(ev){
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			return{x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
		}
		function getStyle(obj,name){
			if(obj.currentStyle){
				return obj.currentStyle[name];
			}
			else{
				return getComputedStyle(obj,false)[name];
			}
		}
		var oDiv = document.getElementById('inner');
		var oDiv2 = document.getElementById('outer');
		var oBox = document.getElementById('box');
		oDiv.onmousedown = function(ev){
			var oEvent = ev || event;
			var pos = getPos(oEvent);
			var disx = pos.x - parseInt(getStyle(oDiv,'left'));
			document.onmousemove = function(ev){
				var oEvent = ev || event;
				var pos = getPos(oEvent);
				var l = pos.x - disx;
				if (l<0) {
					l=0;
				}
				if (l>parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))) {
					l=parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))
				}
				oDiv.style.left = l + 'px';
				oBox.style.width = l/2 + 'px';
				oBox.style.height = l/2 + 'px';
				oBox.style.opacity = l/800;
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}
		
	</script>
</body>
</html>